<template>
  <div
    class="min-h-screen bg-gradient-to-br from-blue-50 via-cyan-100 to-blue-200 dark:from-slate-900 dark:via-blue-900 dark:to-indigo-900 py-8 px-4 relative overflow-hidden"
  >
    <!-- 樱花飘落动画 -->
    <div class="cherry-blossoms">
      <div v-for="i in 20" :key="i" class="cherry-blossom" :style="getCherryBlossomStyle(i)"></div>
    </div>

    <div class="w-full max-w-6xl mx-auto relative z-10">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <!-- 头像和心形布局 -->
        <div
          class="flex items-center justify-center mb-6 space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-12 xl:space-x-16"
        >
          <!-- 左侧头像 -->
          <div class="flex flex-col items-center flex-shrink-0 mt-10">
            <el-avatar
              :size="56"
              :src="coupleInfo.person1.avatar"
              :alt="coupleInfo.person1.nickname"
              class="mb-4 hover:scale-105 transition-transform duration-300 shadow-lg sm:w-20 sm:h-20 md:w-20 md:h-20 lg:w-20 lg:h-20 xl:w-20 xl:h-20"
            >
              {{ coupleInfo.person1.nickname.charAt(0) }}
            </el-avatar>
            <div
              class="text-lg sm:text-xl font-bold text-center bg-gradient-to-r from-blue-500 to-cyan-600 bg-clip-text text-transparent"
            >
              {{ coupleInfo.person1.nickname }}
            </div>
          </div>

          <!-- 中间心形图标 -->
          <div
            class="inline-flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 lg:w-18 lg:h-18 xl:w-20 xl:h-20 bg-gradient-to-r from-pink-400 to-red-400 rounded-full shadow-lg hover:scale-110 transition-transform duration-300 heart-container flex-shrink-0"
          >
            <svg
              class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 lg:w-9 lg:h-9 xl:w-10 xl:h-10 text-white heart-icon"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
              />
            </svg>
            <!-- 发光效果 -->
            <div
              class="absolute inset-0 bg-gradient-to-r from-pink-400 to-red-400 rounded-full opacity-0 heart-glow"
            ></div>
          </div>

          <!-- 右侧头像 -->
          <div class="flex flex-col items-center flex-shrink-0 mt-10">
            <el-avatar
              :size="56"
              :src="coupleInfo.person2.avatar"
              :alt="coupleInfo.person2.nickname"
              class="mb-4 hover:scale-105 transition-transform duration-300 border-4 border-red-200 dark:border-red-600 shadow-lg sm:w-20 sm:h-20 md:w-20 md:h-20 lg:w-20 lg:h-20 xl:w-20 xl:h-20"
            >
              {{ coupleInfo.person2.nickname.charAt(0) }}
            </el-avatar>
            <div
              class="text-lg sm:text-xl font-bold text-center bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent"
            >
              {{ coupleInfo.person2.nickname }}
            </div>
          </div>
        </div>

        <h1
          class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-pink-600 to-red-600 bg-clip-text text-transparent mb-4"
        >
          我们的恋爱日记
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-200">
          记录每一个美好的瞬间，珍藏每一份甜蜜的回忆
        </p>

        <!-- 恋爱统计 -->
        <div class="mt-8 flex flex-wrap justify-center gap-6">
          <div class="text-center">
            <div class="text-2xl font-bold text-pink-600 dark:text-pink-300">
              {{ loveStats.days }}
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-300">恋爱天数</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-red-600 dark:text-red-300">
              {{ loveStats.photos }}
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-300">照片数量</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-purple-600 dark:text-purple-300">
              {{ loveStats.moments }}
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-300">美好时刻</div>
          </div>
        </div>
      </div>

      <!-- 时间轴 -->
      <div class="relative">
        <!-- 时间轴中心线 -->
        <div
          class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-gradient-to-b from-pink-400 to-purple-400 h-full"
        ></div>

        <!-- 恋爱记录时间轴 -->
        <div class="space-y-12">
          <div v-for="(record, index) in loveRecords" :key="record.id" class="relative">
            <!-- 时间轴节点 -->
            <div
              class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-gradient-to-r from-pink-400 to-red-400 rounded-full border-4 border-white dark:border-gray-700 shadow-lg z-10"
            ></div>

            <!-- 记录内容 -->
            <div
              class="relative w-5/12 p-6 bg-white dark:bg-gray-700/80 dark:backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 dark:border-gray-600"
              :class="index % 2 === 0 ? 'ml-auto' : 'mr-auto'"
            >
              <!-- 日期标签 -->
              <div
                class="absolute -top-3 left-6 px-4 py-1 bg-gradient-to-r from-pink-400 to-red-400 text-white text-sm font-medium rounded-full shadow-md"
              >
                {{ formatDate(record.date) }}
              </div>

              <!-- 心情图标 -->
              <div class="flex items-center mb-4">
                <div
                  class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                  :class="getMoodColor(record.mood)"
                >
                  <span class="text-white text-lg">{{ getMoodIcon(record.mood) }}</span>
                </div>
                <span class="text-sm text-gray-600 dark:text-gray-200">{{ record.mood }}</span>
              </div>

              <!-- 标题 -->
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-3">
                {{ record.title }}
              </h3>

              <!-- 描述 -->
              <p class="text-gray-600 dark:text-gray-200 mb-4 leading-relaxed">
                {{ record.description }}
              </p>

              <!-- 照片展示 -->
              <div v-if="record.photos && record.photos.length > 0" class="mb-4">
                <div class="grid grid-cols-2 gap-2">
                  <div
                    v-for="(photo, photoIndex) in record.photos.slice(0, 4)"
                    :key="photoIndex"
                    class="relative group cursor-pointer overflow-hidden rounded-lg"
                    @click="openPhotoViewer(record.photos, photoIndex)"
                  >
                    <img
                      :src="photo.url"
                      :alt="photo.caption"
                      class="w-full h-24 object-cover group-hover:scale-110 transition-transform duration-300"
                    />
                    <div
                      class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    ></div>
                    <!-- 照片数量提示 -->
                    <div
                      v-if="photoIndex === 3 && record.photos.length > 4"
                      class="absolute inset-0 bg-black/50 flex items-center justify-center"
                    >
                      <span class="text-white text-sm font-medium"
                        >+{{ record.photos.length - 4 }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>

              <!-- 标签 -->
              <div v-if="record.tags && record.tags.length > 0" class="flex flex-wrap gap-2">
                <span
                  v-for="tag in record.tags"
                  :key="tag"
                  class="px-3 py-1 bg-pink-100 dark:bg-pink-900/40 text-pink-600 dark:text-pink-300 text-xs rounded-full"
                >
                  {{ tag }}
                </span>
              </div>

              <!-- 位置信息 -->
              <div
                v-if="record.location"
                class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400"
              >
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
                  />
                </svg>
                {{ record.location }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 照片查看器模态框 -->
      <div
        v-if="showPhotoViewer"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 photo-viewer-modal"
        @click="closePhotoViewer"
      >
        <div class="relative max-w-4xl max-h-full overflow-hidden rounded-xl" @click.stop>
          <!-- 关闭按钮 -->
          <button
            @click="closePhotoViewer"
            class="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
          >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>

          <!-- 照片内容 -->
          <div class="relative">
            <img
              :src="currentPhoto.url"
              :alt="currentPhoto.caption"
              class="w-full h-auto max-h-96 object-contain"
            />

            <!-- 照片信息 -->
            <div
              class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white"
            >
              <p class="text-sm">{{ currentPhoto.caption }}</p>
            </div>

            <!-- 照片计数器 -->
            <div
              class="absolute top-4 left-4 px-3 py-1 bg-black/60 text-white text-sm rounded-full photo-counter"
            >
              {{ currentPhotoIndex + 1 }} / {{ currentPhotos.length }}
            </div>

            <!-- 导航按钮 -->
            <button
              @click.stop="previousPhoto"
              class="absolute left-4 top-1/2 transform -translate-y-1/2 p-3 rounded-full bg-black/60 text-white hover:bg-black/80 transition-all duration-200 nav-button"
              :class="{ 'opacity-50 cursor-not-allowed': currentPhotoIndex <= 0 }"
              :disabled="currentPhotoIndex <= 0"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>

            <button
              @click.stop="nextPhoto"
              class="absolute right-4 top-1/2 transform -translate-y-1/2 p-3 rounded-full bg-black/60 text-white hover:bg-black/80 transition-all duration-200 nav-button"
              :class="{
                'opacity-50 cursor-not-allowed': currentPhotoIndex >= currentPhotos.length - 1
              }"
              :disabled="currentPhotoIndex >= currentPhotos.length - 1"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 恋爱记录接口定义
interface LoveRecord {
  id: string
  date: string
  title: string
  description: string
  mood: string
  photos?: Photo[]
  tags?: string[]
  location?: string
}

// 照片接口定义
interface Photo {
  url: string
  caption: string
}

// 情侣信息
interface CoupleInfo {
  person1: {
    nickname: string
    avatar: string
  }
  person2: {
    nickname: string
    avatar: string
  }
}

// 情侣信息数据
const coupleInfo = ref<CoupleInfo>({
  person1: {
    nickname: 'sin',
    avatar: 'https://foruda.gitee.com/avatar/1728913561713775492/9131495_qinfeng_wei_1728913561.png'
  },
  person2: {
    nickname: 'sin',
    avatar: 'https://foruda.gitee.com/avatar/1728913561713775492/9131495_qinfeng_wei_1728913561.png'
  }
})

// 恋爱统计数据
const loveStats = ref({
  days: 365,
  photos: 128,
  moments: 89
})

// 恋爱记录数据
const loveRecords = ref<LoveRecord[]>([
  {
    id: '1',
    date: '2024-03-20',
    title: '第一次约会',
    description:
      '今天是我们第一次正式约会，一起去看了电影，然后去了那家你一直想去的咖啡厅。你笑起来的样子真的很美，让我心跳加速。希望以后能一直这样陪伴在你身边。',
    mood: '开心',
    photos: [
      {
        url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop',
        caption: '咖啡厅的温馨时光'
      },
      {
        url: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=400&h=300&fit=crop',
        caption: '电影院的甜蜜'
      }
    ],
    tags: ['第一次约会', '电影', '咖啡厅'],
    location: '万达广场'
  },
  {
    id: '2',
    date: '2024-03-15',
    title: '你生病了',
    description:
      '听说你感冒了，很担心。给你买了药和水果，虽然不能陪在你身边，但我的心一直和你在一起。希望你快点好起来，我会一直守护你的。',
    mood: '担心',
    photos: [
      {
        url: 'https://images.unsplash.com/photo-1569864358642-9d1684040f43?w=400&h=300&fit=crop',
        caption: '为你准备的药和水果'
      }
    ],
    tags: ['关心', '照顾', '担心'],
    location: '家里'
  },
  {
    id: '3',
    date: '2024-03-10',
    title: '一起看日落',
    description:
      '今天天气很好，我们一起去了海边看日落。夕阳西下，海天一色，金色的光芒洒满海面，就像我们的爱情一样温暖而美好。这一刻，我想永远记住。',
    mood: '浪漫',
    photos: [
      {
        url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop',
        caption: '美丽的日落'
      },
      {
        url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
        caption: '海边的我们'
      },
      {
        url: 'https://images.unsplash.com/photo-1522383225653-ed111181a951?w=400&h=300&fit=crop',
        caption: '浪漫的时光'
      }
    ],
    tags: ['日落', '海边', '浪漫'],
    location: '三亚湾'
  },
  {
    id: '4',
    date: '2024-03-05',
    title: '你的生日',
    description:
      '今天是你的生日，我精心准备了一个惊喜派对。看到你开心的样子，我觉得一切都值得。你是我生命中最重要的人，我会用一生的时间来爱你。',
    mood: '幸福',
    photos: [
      {
        url: 'https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop',
        caption: '生日蛋糕'
      },
      {
        url: 'https://images.unsplash.com/photo-1542810634-71277d95dcbb?w=400&h=300&fit=crop',
        caption: '生日派对'
      },
      {
        url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop',
        caption: '开心的你'
      },
      {
        url: 'https://images.unsplash.com/photo-1569864358642-9d1684040f43?w=400&h=300&fit=crop',
        caption: '美好的回忆'
      }
    ],
    tags: ['生日', '惊喜', '派对'],
    location: '家里'
  },
  {
    id: '5',
    date: '2024-02-28',
    title: '一起做饭',
    description:
      '今天我们一起下厨，虽然不是很熟练，但是很开心。你切菜的样子很可爱，我们一起做的菜虽然简单，但是充满了爱的味道。以后我们要一起学习更多美食。',
    mood: '温馨',
    photos: [
      {
        url: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&h=300&fit=crop',
        caption: '我们一起做的菜'
      }
    ],
    tags: ['下厨', '温馨', '美食'],
    location: '厨房'
  },
  {
    id: '6',
    date: '2024-02-20',
    title: '吵架了',
    description:
      '今天因为一点小事吵架了，我很后悔。你哭了，我的心都碎了。对不起，我不应该让你伤心。以后我会更加包容和理解你，我们的感情会越来越深。',
    mood: '难过',
    photos: [],
    tags: ['吵架', '道歉', '成长'],
    location: '家里'
  }
])

// 照片查看器状态
const showPhotoViewer = ref(false)
const currentPhotos = ref<Photo[]>([])
const currentPhotoIndex = ref(0)

// 计算属性
const currentPhoto = computed(() => {
  if (currentPhotos.value.length === 0) return { url: '', caption: '' }
  return currentPhotos.value[currentPhotoIndex.value]
})

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    month: 'long',
    day: 'numeric'
  })
}

// 获取心情颜色
const getMoodColor = (mood: string) => {
  const moodColors: Record<string, string> = {
    开心: 'bg-yellow-400',
    浪漫: 'bg-pink-400',
    幸福: 'bg-red-400',
    温馨: 'bg-orange-400',
    担心: 'bg-blue-400',
    难过: 'bg-gray-400'
  }
  return moodColors[mood] || 'bg-gray-400'
}

// 获取心情图标
const getMoodIcon = (mood: string) => {
  const moodIcons: Record<string, string> = {
    开心: '😊',
    浪漫: '💕',
    幸福: '🥰',
    温馨: '🏠',
    担心: '😟',
    难过: '😢'
  }
  return moodIcons[mood] || '😊'
}

// 打开照片查看器
const openPhotoViewer = (photos: Photo[], index: number) => {
  currentPhotos.value = photos
  currentPhotoIndex.value = index
  showPhotoViewer.value = true
}

// 关闭照片查看器
const closePhotoViewer = () => {
  showPhotoViewer.value = false
}

// 组件挂载时的初始化
onMounted(() => {
  console.log('恋爱日记组件已加载')

  // 添加键盘事件监听
  document.addEventListener('keydown', handleKeydown)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})

// 键盘事件处理
const handleKeydown = (event: KeyboardEvent) => {
  if (!showPhotoViewer.value) return

  switch (event.key) {
    case 'ArrowLeft':
      if (currentPhotoIndex.value > 0) {
        previousPhoto()
      }
      break
    case 'ArrowRight':
      if (currentPhotoIndex.value < currentPhotos.value.length - 1) {
        nextPhoto()
      }
      break
    case 'Escape':
      closePhotoViewer()
      break
  }
}

// 上一张照片
const previousPhoto = () => {
  console.log('Previous photo clicked, current index:', currentPhotoIndex.value)
  if (currentPhotoIndex.value > 0) {
    currentPhotoIndex.value--
    console.log('Moved to previous photo, new index:', currentPhotoIndex.value)
  }
}

// 下一张照片
const nextPhoto = () => {
  console.log('Next photo clicked, current index:', currentPhotoIndex.value)
  if (currentPhotoIndex.value < currentPhotos.value.length - 1) {
    currentPhotoIndex.value++
    console.log('Moved to next photo, new index:', currentPhotoIndex.value)
  }
}

// 樱花飘落样式生成函数
const getCherryBlossomStyle = (index: number) => {
  const left = Math.random() * 100
  const animationDelay = Math.random() * 20
  const animationDuration = 10 + Math.random() * 10

  return {
    left: `${left}%`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}
</script>

<style scoped>
/* 自定义样式 */
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* 时间轴动画 */
.space-y-12 > div {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.space-y-12 > div:nth-child(1) {
  animation-delay: 0.1s;
}
.space-y-12 > div:nth-child(2) {
  animation-delay: 0.2s;
}
.space-y-12 > div:nth-child(3) {
  animation-delay: 0.3s;
}
.space-y-12 > div:nth-child(4) {
  animation-delay: 0.4s;
}
.space-y-12 > div:nth-child(5) {
  animation-delay: 0.5s;
}
.space-y-12 > div:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 照片悬停效果 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .w-5\/12 {
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .left-1\/2 {
    left: 1rem;
  }

  .transform.-translate-x-1\/2 {
    transform: none;
  }
}

/* 移除滚动条相关样式，因为不再需要 */

/* 照片查看器样式 */
.photo-viewer-modal {
  backdrop-filter: blur(8px);
}

/* 导航按钮样式 */
.nav-button {
  transition: all 0.2s ease;
}

.nav-button:hover:not(:disabled) {
  transform: scale(1.1);
}

.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 照片计数器样式 */
.photo-counter {
  backdrop-filter: blur(4px);
}

/* 樱花飘落动画 */
.cherry-blossoms {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.cherry-blossom {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #ffb3d9, #ff69b4);
  border-radius: 50% 0 50% 50%;
  opacity: 0.7;
  animation: fall linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 105, 180, 0.3));
}

.cherry-blossom:nth-child(even) {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, #ffcce6, #ff1493);
  animation-duration: 12s;
}

.cherry-blossom:nth-child(3n) {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #ffb3d9, #ff69b4);
  animation-duration: 15s;
}

.cherry-blossom:nth-child(4n) {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #ffd6e7, #ff69b4);
  animation-duration: 18s;
}

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
    transform: translateY(-80px) rotate(45deg) scale(1);
  }
  50% {
    transform: translateY(50vh) rotate(180deg) scale(1.1);
  }
  90% {
    opacity: 0.7;
    transform: translateY(90vh) rotate(315deg) scale(1);
  }
  100% {
    transform: translateY(100vh) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

/* 响应式头像布局 */
@media (max-width: 640px) {
  .flex.items-center.justify-center.space-x-4.sm\:space-x-6.md\:space-x-8.lg\:space-x-12.xl\:space-x-16 {
    padding: 0 0.5rem;
  }

  /* 确保头像和爱心在小屏幕上也能正常显示 */
  .flex-shrink-0 {
    flex-shrink: 0;
  }
}

/* Avatar 组件自定义样式 */
.el-avatar {
  border: 4px solid;
}

.el-avatar.border-pink-200 {
  border-color: #fce7f3;
}

.el-avatar.border-red-200 {
  border-color: #fed7d7;
}

.dark .el-avatar.border-pink-600 {
  border-color: #be185d;
}

.dark .el-avatar.border-red-600 {
  border-color: #dc2626;
}

/* 爱心动画样式 */
.heart-container {
  position: relative;
}

.heart-icon {
  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6));
}

.heart-glow {
  animation: heartGlow 3s ease-in-out infinite;
  filter: blur(8px);
}

@keyframes heartGlow {
  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
  }
}

/* 悬停时的效果 */
.heart-container:hover .heart-icon {
  filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.8));
}

.heart-container:hover .heart-glow {
  animation: heartGlow 1.5s ease-in-out infinite;
}
</style>
